<template>
	<view>
		<!-- 暂位 -->
		<view style="height: 75upx;"></view>
		<!-- logo -->
		<view class="flex justify-center align-center flex-direction" style=" margin-bottom: 80upx;">
			<view><image src="https://qxmall.oss-cn-shenzhen.aliyuncs.com/icon%20%282%29.png" class="logo"></image></view>
			<view style="font-size: 200% ; font-weight: bold;">青缃商城</view>
		</view>
	
		<!-- 表单 -->
		<view>
			<view class="log-form">
				<input class="log-input" v-model="form.phone" type="text" placeholder="邮箱/用户名/手机号"/>
			</view>
			<view class="log-form flex align-center">
				<input class="log-input" v-model="form.password" type="password" :placeholder="this.status==0?'请输入密码':'请输入验证码'"/>
				<button :disabled="isCodeSend" class="cu-tag bg-orange round"  v-if="this.status==1" style="width: 200upx; height: 80upx;" @click="getCode">{{codeText}}</button>
			</view>
		</view>
		
		<!-- 登录按钮 -->
		<view class="flex justify-center" style="margin-top: 40upx;margin-bottom: 40upx;">
			<button class="cu-btn  bg-red" style="width: 700upx;height: 100upx;" @click="login">登录</button>
		</view>
		
		<!-- 忘记密码 && 注册-->
		<view class="flex justify-between" style="padding-left: 30upx; padding-right: 30upx; margin-bottom: 80upx;">
			<view class="text-gray" @tap="forgetPs">忘记密码 ?</view>
			<view class="text-gray" @tap="register">新用户注册 <text class="cuIcon-right"></text> </view>
		</view>
		
		<!-- 登录方式 -->
		<view class="flex justify-between align-center">
			<!-- 分割线左 -->
			<view class="line"></view>
			<view style="color: gray;">其他登录方式</view>
			<!-- 分割线右 -->
			<view class="line"></view>
		</view>
		
		<!-- 快捷登录 -->
		<view class="flex justify-center" style="margin-top: 40upx;">
			<view @tap="go(0)"><image class="log-method" src="../../static/icon/wechat.png"/></view>
			<view @tap="go(1)"><image class="log-method" src="../../static/icon/QQ.png"/></view>
			<view @tap="go(2)"><image class="log-method" src="../../static/icon/webo.png"/></view>
			<view @tap="go(3)"><image class="log-method" :src=" this.status==0?'../../static/icon/password2.png':'../../static/icon/phone.png'"/></view>
		</view>
		
		<!-- 版权声明 -->
		<view class="plagiarism">
			<view>版权声明 村乡结合部</view>
			<view style="margin-top: 5upx;">登录代表您已同意<text style="color: #007AFF;">【隐私政策】</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:0 ,	// 0【密码登录】、1【验证码登录】
				codeText:'获取验证码',
				isCodeSend: false ,// 默认未发送
				form:{ // 表单
					phone:'',
					password:''
				}
			}
		},
		methods: {
			forgetPs(){
				console.log('reset password')
			},
			register(){
				uni.navigateTo({
					url:'./register'
				})
			},
			
			// 用户登录
			login(){
				// 普通密码登录
				this.$request({
					url:'front/member/login',
					params:{
						loginacct: this.form.phone,
						password: this.form.password
					},
					type:'POST'
				}).then(res=>{
					console.log('res',res)
					if(res.code=='0'){
						 uni.setStorageSync('userInfo',res.data)
						 // 跳转到tabBar页面：index.vue
						 uni.switchTab({ 
							url:'../my/my'//路径后不能带参数
					 })
					}else{ // 用户不存在
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			
			go(num) {
				switch (num){
					case 0 :console.log('wechat-Login');break;
					case 1 :console.log('QQ-Login');break;
					case 2 :console.log('webo-Login');break;
					case 3 :this.status = this.status==0?1:0;break;
				}
			},
			
			getCode(){
				console.log('发送验证码')
				// 手机号格式判断
				// if( this.form.phone.length != 11) {
				// 	uni.showToast({
				// 		icon:"none",
				// 		title:'手机号格式不正确！'
				// 	})
				// 	return
				// }
				
				/*  访问服务端，获取验证码
					this.$request({
						url:'/user/getSms',
						params:{
							phone:this.form.phone
						},
						type:'POST'
					}).then(res=>{
						console.log(res)
					}).catch(err=>{
						console.log(err)
					})
				*/
				
				// 等待用户键入收到的验证码
				// var getCode = this.form.password
				
				// 设置按钮不可点击
				// if(this.codeText=='获取验证码'){
				// 	this.isCodeSend = true // 按钮变为不可点击状态
				// }else{
				// 	return
				// }
				// // 填写允许周期
				// var time = 60
				// var setTimeout = setInterval(()=>{ // 一秒触发一次
				// 	time--
				// 	if(time<=0){
				// 		this.codeText = '获取验证码'
				// 		this.isCodeSend = false // 恢复点击
				// 		clearInterval(setTimeout)
				// 	}else{
				// 		this.codeText = time+'后重发'
				// 	}
				// },1000)
			}
		}
	}
</script>

<style>
.logo {
	width: 250upx;
	height: 250upx;
}
.form-label {
	font-size: 150%;
	font-weight: bold;
}
.log-form {
	display: flex;
	padding-left: 50upx;
}
.log-input {
	height: 100upx;
	width: 600upx;
	border-bottom: 1upx solid #DDDDDD;
}
.line {
	height: 1upx;
	background-color: #DDDDDD;
	flex-grow: 1;
}
.log-method {
	width: 100upx;
	height: 80upx;
	padding-left: 20upx;
}
.plagiarism {
	position: fixed;
	width: 700upx;
	bottom: 10upx; // 靠底部多少举例
	color: gray;	
	text-align: center;
}
</style>
